<template>
    <svg v-if="endsWith('.txt')" t="1671079780860" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2386" width="200" height="200">
        <path
            d="M913.066667 324.266667l-4.266667-4.266667c0-4.266667-4.266667-4.266667-4.266667-8.533333l-234.666666-256c-4.266667-4.266667-8.533333-4.266667-8.533334-8.533334l-4.266666-4.266666H213.333333C153.6 42.666667 106.666667 89.6 106.666667 149.333333v725.333334C106.666667 934.4 153.6 981.333333 213.333333 981.333333h597.333334c59.733333 0 106.666667-46.933333 106.666666-106.666666V341.333333c0-4.266667 0-12.8-4.266666-17.066666z m-230.4-128L776.533333 298.666667H682.666667V196.266667zM810.666667 896H213.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333v-725.333334c0-12.8 8.533333-21.333333 21.333333-21.333333h384v213.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h192v490.666667c0 12.8-8.533333 21.333333-21.333333 21.333333z"
            p-id="2387" fill="#1296db"></path>
        <path
            d="M640 426.666667H384c-25.6 0-42.666667 17.066667-42.666667 42.666666s17.066667 42.666667 42.666667 42.666667h85.333333v256c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256h85.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666z"
            p-id="2388" fill="#1296db"></path>
    </svg>
    <svg v-else-if="endsWith('.docx', '.doc')" t="1671079813408" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="3427" width="200" height="200">
        <path
            d="M791.94 155.36H332.48c-42.23 0-76.54 34.31-76.54 76.54v76.55h-51.03c-28.16 0-51.04 22.87-51.04 51.03v306.37c0 28.15 22.88 51.02 51.04 51.02h51.03v76.54c0 42.24 34.32 76.55 76.54 76.55h459.46c42.23 0 76.54-34.32 76.54-76.54V231.9c0.1-42.24-34.31-76.54-76.54-76.54z m-547.68 298.6h40.28l26.04 93.58h5.7l29.16-93.58h34.45l29.02 93.71h6.24l26.18-93.71h40.41l-40.41 133.72H384.1l-19.53-70.25h-5.43l-19.26 69.98h-55.74l-39.88-133.45zM817.45 793.5c-0.01 14.09-11.42 25.5-25.51 25.51H332.48c-14.09-0.01-25.5-11.43-25.51-25.51v-76.54h204.21c28.15 0 51.03-22.88 51.03-51.03V614.9H740.9c14.09-0.01 25.51-11.43 25.52-25.52-0.02-14.09-11.43-25.5-25.52-25.51H562.21v-51.03H740.9c14.09-0.01 25.51-11.43 25.52-25.52-0.01-14.09-11.43-25.5-25.52-25.52H562.21v-51.03H740.9c14.09-0.01 25.51-11.43 25.52-25.51-0.01-14.09-11.43-25.51-25.52-25.52H562.21c0-28.16-22.89-51.03-51.03-51.03H306.97v-76.54c0.01-14.09 11.43-25.5 25.51-25.52h459.46c14.08 0.01 25.5 11.43 25.51 25.52V793.5z m0 0"
            fill="#1296db" p-id="3428"></path>
    </svg>
    <svg v-else-if="endsWith('.c', '.cpp', '.js', '.py', '.java', '.html', '.css', '.sh')" t="1671079859509"
        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4442" width="200"
        height="200">
        <path
            d="M742.4 139.264q27.648 24.576 44.032 41.472t25.088 28.672 10.752 19.968 2.048 14.336l0 16.384-150.528 0q-11.264 0-18.944-7.68t-12.8-17.92-7.68-20.992-2.56-17.92l0-125.952 2.048 0q9.216 0 17.408 2.048t19.968 9.728 28.672 21.504 42.496 36.352zM567.296 197.632q0 19.456 6.144 41.984t19.456 41.472 33.792 31.744 48.128 12.8l149.504 0 0 513.024q0 29.696-11.776 53.248t-31.232 40.448-43.008 26.112-46.08 9.216l-441.344 0q-19.456 0-42.496-11.264t-43.008-29.696-33.28-42.496-13.312-49.664l0-632.832q0-21.504 10.24-45.056t27.136-42.496 38.4-31.744 45.056-12.8l327.68 0 0 128zM485.376 659.456q12.288-12.288 13.312-32.768t-11.264-31.744l-167.936-168.96q-12.288-12.288-30.208-12.288t-30.208 12.288q-12.288 13.312-12.288 31.232t12.288 30.208l137.216 139.264-137.216 138.24q-12.288 12.288-12.288 30.208t12.288 31.232q12.288 12.288 30.208 12.288t30.208-12.288zM695.296 773.12l-192.512 0 0 64.512 192.512 0 0-64.512z"
            p-id="4443" fill="#1296db"></path>
    </svg>
    <el-image v-else-if="endsWith('.jpg', '.jpeg', '.gif', '.png')" :src="link" :preview-src-list="enableImagePreview?[link]:[]" @click.stop="handleImageClick">
        <template #error>
          <div class="image-slot">
            <svg t="1671429742266" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2904" width="200" height="200"><path d="M938.666667 553.92V768c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v297.92z m-64-74.624V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v344.48A290.090667 290.090667 0 0 1 192 597.333333a286.88 286.88 0 0 1 183.296 65.845334C427.029333 528.384 556.906667 437.333333 704 437.333333c65.706667 0 126.997333 16.778667 170.666667 41.962667z m0 82.24c-5.333333-8.32-21.130667-21.653333-43.648-32.917333C796.768 511.488 753.045333 501.333333 704 501.333333c-121.770667 0-229.130667 76.266667-270.432 188.693334-2.730667 7.445333-7.402667 20.32-13.994667 38.581333-7.68 21.301333-34.453333 28.106667-51.370666 13.056-16.437333-14.634667-28.554667-25.066667-36.138667-31.146667A222.890667 222.890667 0 0 0 192 661.333333c-14.464 0-28.725333 1.365333-42.666667 4.053334V768a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V561.525333zM320 480a96 96 0 1 1 0-192 96 96 0 0 1 0 192z m0-64a32 32 0 1 0 0-64 32 32 0 0 0 0 64z" fill="#2c2c2c" p-id="2905"></path></svg>
          </div>
        </template>
    </el-image>
    <svg v-else t="1671079994420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4979" width="200" height="200">
        <path
            d="M432.209252 833.702498a42.666453 42.666453 0 1 1 42.666454 42.666453 42.666453 42.666453 0 0 1-42.666454-42.666453zM511.99552 566.6105a36.69315 36.69315 0 0 0-42.666453-37.973143 78.506274 78.506274 0 0 0-57.173048 29.439853l-55.039725-50.77308A163.839181 163.839181 0 0 1 482.129003 447.99776c69.972983 0 124.586044 33.279834 124.586043 111.786108S511.99552 661.330027 517.542159 735.99632H430.07593C416.422665 648.956755 511.99552 612.69027 511.99552 566.6105z m312.745103 383.99808H200.103746V72.106306H511.99552v239.785468A72.959635 72.959635 0 0 0 584.101826 383.99808h238.932139zM582.821833 110.506114l200.958995 201.812324h-200.958995z m291.83854 191.145711L597.328427 21.333227a76.799616 76.799616 0 0 0-14.506594-11.519943l-4.266646-2.133322h-2.986652A71.679642 71.679642 0 0 0 546.128683 0H200.957075A72.959635 72.959635 0 0 0 127.99744 72.106306v879.782268A72.959635 72.959635 0 0 0 200.957075 1023.99488h622.930219A71.252977 71.252977 0 0 0 895.9936 951.888574V352.424905a71.679642 71.679642 0 0 0-21.333227-50.77308z"
            fill="#1296db" p-id="4980"></path>
    </svg>
</template>
<script>
export default {
    props: {
        modelValue:String,
        link:String,
        size:{
            type:String,
            default:"16"
        },
        enableImagePreview:{
            type:Boolean,
            default:false
        }
    },
    methods: {
        endsWith(...arr) {
            if (this.modelValue === undefined) {
                return false
            }
            for (let s of arr) {
                if (this.modelValue.endsWith(s)) {
                    return true
                }
            }
            return false
        },
        handleImageClick(e){
            if(!this.enableImagePreview){
                this.$emit('click',e)
            }
        }
    },
    mounted(){
        this.$el.classList.add('file-icon')
        this.$el.style.width=this.size+'px'
        this.$el.style.height=this.size+'px'
        this.$el.style.minWidth=this.size+'px'
        this.$el.style.minHeight=this.size+'px'
    }
}
</script>
<style lang="scss">
.file-icon{
}
</style>